<template>
	<div class="login">
	
		<van-nav-bar
		title=""
        left-text=""
        right-text="注册"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight" />
	<div class="login-title">
		<p>账号密码登录</p>
	</div>
	<div class="login-name">
		<input type="text" placeholder="请输入手机号码" v-model="username"/>
	</div>
	<div class="login-pwd">
		<input type="password" placeholder="请输入密码" v-model="userpwd" />
	</div>
	<div class="login-btn" @click="setlogin">
		<p>登录</p>
	</div>
	<div class="login-state">
		<router-link to='/user/chagepwd'>
			忘记密码?
		</router-link>
	</div>
	<div class="login-text">
		注册/登录即代表同意《贝壳隐私政策》《贝壳用户服务协议》
	</div>
	</div>
</template>

<script>
import { Toast } from 'vant';
import { NavBar } from 'vant';

export default {
	name: 'login',
	data() {
		return {
			username: '',
			userpwd: ''
		};
	},
	
	methods: {
		onClickLeft() {
			this.$router.go(-1);
		},
		onClickRight() {
			this.$router.push({
				name:'regster'
			})
		},
		setlogin() {
			this.username = this.username;
			this.userpwd = this.userpwd;
			if (this.username == '' || this.userpwd == '') {
				this.$toast({
					message: '请输入的手机号和密码不能为空'
				});
			} else {
				if (
					!/^((1[3,5,8,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(
						this.username
					)
				) {
					this.$toast({
						message: '你输入的手机号格式有误'
					});
				} else {
					//ajax
                      var datax = {
                      	tel:this.username,
						pwd:this.userpwd 
                      }
					  var _this=this;
                      _this.axios.post(_this.ajaxUrl+'/api/user/login',_this.qs.stringify(datax)).then(function(res){
                      	if(res.data.msg=="err"){
							_this.$toast({
								message: '你输入的手机号和密码不存在或者错误'
							});
						}
						else{
							localStorage.setItem("nameid",res.data.ids);
							_this.$toast({
								message: '登陆成功！！'
							});
							_this.$router.push({
								name:'home'
							});
						}
                      }).catch(function(err){
                      	
                      });
					const toast = Toast.loading({
						duration: 0, // 持续展示 toast
						forbidClick: true, // 禁用背景点击
						loadingType: 'spinner',
						message: '登录中...'
					});

					let second = 1;
					const timer = setInterval(() => {
						second--;
						if (second) {
							toast.message = `登录中...`;
						} else {
							clearInterval(timer);
							Toast.clear();
						}
					}, 1000);
					
				}
			}
		}
	}
};
</script>

<style scoped="scoped">
.login-title {
	width: 6.5rem;
	height: 1rem;
	margin: auto;
	font-size: 0.5rem;
}
.login-name {
	width: 6.5rem;
	height: 1.2rem;
	margin: auto;
	border-bottom: 1px solid gainsboro;
	display: flex;
	align-items: center;
}
.login-name > input {
	width: 5rem;
	height: 1rem;
	border: none;
}
.login-pwd {
	width: 6.5rem;
	height: 1.2rem;
	margin: auto;
	border-bottom: 1px solid gainsboro;
	display: flex;
	align-items: center;
}
.login-pwd > input {
	width: 5rem;
	height: 1rem;
	border: none;
}
.login-btn {
	width: 6.5rem;
	height: 0.95rem;
	margin: auto;
	background: #008aff;
	margin-top: 0.3rem;
	text-align: center;
	line-height: 0.95rem;
	color: white;
}
.login-text{
	width: 6.5rem;
	height: 0.5rem;
	margin: auto;
	color: gainsboro;
	font-size: 0.25rem;
	margin-top: 0.2rem;
}
.login-state{
	width: 6.5rem;
	height:0.5rem;
	margin: auto;
	line-height: 0.5rem;
	text-align: center;
	font-size: 0.3rem;
	margin-top: 0.2rem;
	}
</style>
